<template>
	<div>
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-row justify="end" style="margin-bottom: 15px; margin-top: 3px">
				<el-col :span="8">
					<div style="float: left; height: 40px; width: 5px; background: green"></div>
					<div style="float: left; margin-top: 10px; margin-left: 20px; font-size: 16px">图片列表</div>
					<div style="float: left; margin-top: 11px; margin-left: 30px; font-size: 14px">{{ title }}</div>
				</el-col>
				<el-col :span="16" style="text-align: right"> </el-col>
			</el-row>
			<div class="evidence-unit-img-container">
				<el-upload
					:action="UploadUrl"
					:headers="customsHeaders"
					list-type="picture-card"
					:auto-upload="true"
					:data="imgData"
					:file-list="fileList"
					:on-success="onSuccess"
					:limit="10"
					:class="{'dis':!isSameOrgan}"
				>
					<template #default>
						<i class="el-icon-plus"></i>
					</template>
					<template #tip v-if="isSameOrgan">
						<div
							class="el-upload el-upload--picture-card el-icon-camera"
							@click="onCameraInfo(1)"
							style="margin-left: 10px; font-size: 30px; color: #8c939d"
						></div>
						<div
							class="el-upload el-upload--picture-card el-icon-user"
							@click="onCameraInfo(2)"
							style="margin-left: 10px; font-size: 30px; color: #8c939d"
						>
						</div>
					</template>
					<template #file="{ file }">
						<el-image ref="previewRef" :src="file.url" :preview-src-list="previewImgs" style="width:150px;height:150px;"></el-image>
						<div>
							<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
							<span class="el-upload-list__item-actions" v-if="isSameOrgan">
								<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
									<i class="el-icon-zoom-in"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
									<i class="el-icon-download"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
									<i class="el-icon-delete"></i>
								</span>
							</span>
						</div>
					</template>
				</el-upload>
			</div>
		</el-card>
		<Camera ref="cameraRef" />
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '/@/store/index';
import Camera from '/@/views/evidence/unit/component/camera.vue';
import { Session } from '/@/utils/storage';
import { queryImgs, deleteImg } from '/@/api/common/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import { PostBase64Imgs } from '/@/api/common/index';
import { UploadUrl } from '/@/common';
import { openCamera,openCameraForPhoto } from '/@/api/hardware/index';

export default {
	components: { Camera },
	name: 'Img',
	setup() {
		const previewRef = ref();
		const cameraRef = ref();
		const router = useRouter();
		const store = useStore();
		const query = router.currentRoute.value.query;
		const state = reactive({
			title: '',
			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false,
			previewImgs: [],
			fileList: [],
			isSameOrgan:query.isSameOrgan
		});
		const handleRemove = (file: any) => {
			ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					deleteImg({
						id: file.id,
					}).then((res) => {
						if (res.success) {
							init();
							ElMessage.success('删除成功');
						}
					});
				})
				.catch(() => {});
		};
		const handlePictureCardPreview = (file) => {
			state.previewImgs = [];
			state.previewImgs.push(file.url);
			previewRef.value.showViewer = true;
		};
		const handleDownload = (file) => {
			let a = document.createElement('a');
			if ('download' in a) {
				a.download = file.name;
			}
			(document.body || document.documentElement).appendChild(a);
			a.href = file.url;
			a.target = '_blank';
			a.click();
			a.remove();
		};

		function onCameraInfo(ty) {
			var _data = { key: "", type: Number(query.ty), relevanceNo: query.no, relevanceId:query.id,url: import.meta.env.VITE_API_URL + '/common/upload/base64img' };
			if(ty == "2"){
				openCameraForPhoto(_data).then(init);
				return;
			}
			store.dispatch('hardware/getHardwareConfigByKey', 'yjpz_gaopaiyi').then(function (cfg) {
				if (!cfg || !cfg.res1) {
					ElMessage('未配置【高拍仪配置】');
					return;
				}
				_data.key = cfg.res1;
				openCamera(_data).then(init);
			});
		}

		const customsHeaders = computed(() => {
			return {
				Authorization: `Bearer ${Session.get('token')}`,
			};
		});
		const imgData = computed(() => {
			return {
				id: 0,
				ty: query.ty,
				no: query.no,
			};
		});

		function onSuccess(response, file, fileList) {
			if (response.success) {
				init();
				ElMessage.success('上传成功');
			}
		}

		(function () {
			let tilte = '案卷';
			if (query.ty == 3) tilte = '凭证';
			state.title = `案卷名称：${query.name}，${tilte}编号：${query.no}`;
			init();
		})();
		async function init() {
			state.fileList = [];
			state.previewImgs = [];
			await queryImgs(query.no, query.ty).then((res: any) => {
				if (res.success) {
					res.data.forEach((x) => {
						state.previewImgs.push(x.url);
						state.fileList.push({
							id: x.id,
							name: x.name,
							url: x.url,
						});
					});
				}
			});
		}
		//拍照回传
		//数据格式{RelevanceId:0,Type:0,base64Imgs:[]}
		window.clientPhotograph = (_data: any) => {
			clientPhotograph(_data);
		};
		function clientPhotograph(_data: any) {
			//alert(_data);
			_data = JSON.parse(_data);
			//if(_data.success){init();ElMessage.success('上传成功');return;}
			if (!_data.Success) {
				ElMessage({ message: '拍摄失败', type: 'error' });
				return;
			}
			_data = { type: Number(query.ty), relevanceNo: query.no, base64Imgs: _data.base64Imgs };
			PostBase64Imgs(_data).then((res: any) => {
				if (res.success) {
					init();
					ElMessage.success('上传成功');
				}
			});
		}

		return {
			handleRemove,
			handlePictureCardPreview,
			handleDownload,
			previewRef,
			cameraRef,
			onCameraInfo,
			customsHeaders,
			imgData,
			onSuccess,
			clientPhotograph,
			UploadUrl,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
 .el-upload-list__item {
	display: block !important;
	color: white;
	top: 10px;
	right: 10px;
}
:deep() .dis .el-upload--picture-card{display:none;}

/deep/ .el-upload-list--picture-card .el-upload-list__item .el-icon-close
{
	display: block !important;
}

/deep/ .el-upload-list__item .el-icon-close {
	display: block !important;
    position: absolute;
    top:10px;
    right: 10px;
    cursor: pointer;
    opacity: .75;
	color: white !important;
}
</style>
